<template>
  <div class="wrapper">
  <div class="wrapp">
      <div class="top">
        <img src="../assets/位置.png">
        <span class="location">北京理工大学国防科技园2号楼10层</span>
        <img src="../assets/消息中心.png">
      </div>
      <div class="search">
        <img src="../assets/搜索.png">
        <p class="search-title">山姆会员商店优惠商品</p>
      </div>
      <div class="img">
        <img src="../assets/bar1.png" width='355vw' style="border-radius: 2vw;">
      </div>
      <div class="wrap">
        <div class="wrap-item">
          <img src="../assets/超市.png">
          <span class="name">超市便利</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/菜市场.png">
          <span class="name">菜市场</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/水果店.png">
          <span class="name">水果店</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/鲜花.png">
          <span class="name">鲜花绿植</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/医药健康.png">
          <span class="name">医药健康</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/家居.png">
          <span class="name">家居时尚</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/蛋糕.png">
          <span class="name">烘焙蛋糕</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/签到.png">
          <span class="name">签到</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/大牌免运.png">
          <span class="name">大牌免运</span>
        </div>
        <div class="wrap-item">
          <img src="../assets/红包.png">
          <span class="name">红包套餐</span>
        </div>
  </div>
  </div>
  <div class="wrapp">
    <div class="dianpu">附近店铺</div>
    
      <div class="card"  v-for="item in saleInfo" :key="item.id" @click="info(item.id)">
            <div class="cardImg"><img :src="item.img"></div>
            <div class="info">
                <span class="cardName">{{item.name}}</span>
                <div class="info-price">
                <span class="yue">月售{{item.sale}}</span>
                <span class="first">起送￥{{item.qisong}}</span>
                <span class="price">基础运费￥{{item.basePrice}}</span>
                </div>
                <span class="quan">{{item.info}}</span>
                <div class="hr"></div>
            </div>
      </div>     
    
    <div style="height:16vw"></div>
  </div>
  </div>
</template>

<script>
  // import SaleInfos from '@/components/SaleInfos.vue'
  import {mapState,mapGetters,mapMutations} from 'vuex'
  export default{
    // name: 'HomeView',
    // components: {
    //   SaleInfos
    // },
    data(){
      return {
         sales:[{
                id:'',
                name:'',
                img:'',
                sale:'',
                qisong:'',
                basePrice:'',
                info:''
            }]
      }

    },
     created(){
        // console.log(this.$store.getters.Info) 
      
    },
    computed:{
      ...mapState(['saleInfo','sales']),
      ...mapGetters(['Info']) 
    },
    methods:{
      ...mapMutations(['sales']),
     info(id){
         this.$router.push({path:'/saleinfo'+id}),
         this.sales=this.saleInfo[id-1], 
         this.$store.commit("sales",{sales:this.sales})
        console.log(this.$store.state.sales)
      },
    }
  }

</script>

<style lang="scss" scoped>
.wrapper{
  min-height:100vh;
  background-color:#f1f1ee;
  width:100vw;
}
.wrapp{
   margin-bottom: 2vw;
   background:white;
}
  .top{
   
    display:flex;
    padding:3vw;
    img{
      width:6vw;
      height:6vw;
    }
    .location{
      line-height: 6vw;
      margin-right: 13vw;
      margin-left: 2vw;
    }
  }
  .search{
    background-color: #f5f5f4;
    height: 10vw;
    border-radius: 5vw;
    width: 94vw;
    margin: 0 auto;
    margin-bottom:2vw;
    img{
      width: 6vw;
      height: 6vw;
      padding: 2vw;
      margin-left: 2vw;
    }
    p{
      color: #cdcdcd;
      margin-left: 13vw;
      margin-top: -9vw;
    }
  }
  .img{
    width:50vw;
    height:30vw;
    border-radius:2vw;
    margin-left: 3vw;
  }
  .wrap{
      display: flex;
      width: 94vw;
      justify-content: space-between;
      margin: 0 3vw;
      flex-wrap: wrap;
    img{
      width:10vw;
      height:10vw;
    }
    .wrap-item{
      margin-top: 3vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 2vw;
      width: 14vw;
      margin-bottom: 2vw;
      .name{
        font-size: 3vw;
        margin-top: 1vw;
      }
    }
  }
  .dianpu{
    font-size:5vw;
    padding: 3vw;
  }
  .card{
        background-color:white;
        // margin-top: 1vw;
        display:flex;
  
    .cardImg{
      width:15vw;
      margin-left: 3vw;
      img{
        width: 15vw;
        height: 15vw;
      }
    }
    .info{
      margin-left: 4vw;
      display:flex;
      flex-direction:column;
      margin-bottom:2vw;
      .cardName{
        font-size: 4.5vw;
        margin-bottom:2vw;
      }
      .info-price{
        margin-bottom:2vw;
        font-size: 3.5vw;
        display:flex;
        .yue{
          margin-right:5vw;
        }
        .first{
          margin-right:5vw;
        }
      }
      .quan{
        color: red;
        font-size: 4vw;
        margin-bottom:2vw;
      }
       .hr{
        background-color: #cdcdcd;
        height: 0.1vw;
        width: 75vw;
      }
    }
   
    }
</style>




//  @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

// import {mapState,mapGetters} from 'vuex'

// export default {
//   name: 'HomeView',
//   components: {
//     HelloWorld
//   },
  
//   computed:{
//     ...mapState('count')
//   },
// }
